<template>
  <!-- 
    三级分类选择器：
      SpuList显示的时候，不禁用 isShow === 1
      其他组件显示的时候，就需要禁用
  -->
  <CategorySelector :disabled="isShow !== 1" />
  <!-- 
    三个组件切换显示：
      SpuList
      SaveOrUpdateSpu
      SaveSku
    
    一个标识：isShow
      1 = "SpuList"
      2 = "SaveOrUpdateSpu"
      3 = "SaveSku"
  -->
  <SpuList v-if="isShow === 1" @setIsShow="isShow = $event" @setSpu="spu = $event" />
  <SaveOrUpdateSpu v-else-if="isShow === 2" @setIsShow="isShow = $event" :spu="spu" />
  <SaveSku v-else @setIsShow="isShow = $event" :spu="spu" />
</template>

<script lang="ts">
export default {
  name: "XSpu",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import CategorySelector from "@/components/CategorySelector/index.vue";
import SpuList from "./components/SpuList.vue";
import SaveOrUpdateSpu from "./components/SaveOrUpdateSpu.vue";
import SaveSku from "./components/SaveSku.vue";

const isShow = ref(1);

const spu = ref({
  spuName: "",
  tmId: undefined,
  description: "",
  spuImageList: [],
  spuSaleAttrList: [],
});
</script>

<style scoped></style>
